<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>天地图－地图API</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "Microsoft YaHei"
        }

        #mapDiv {
            width: 100%;
            height: 100vh
        }

        input,
        b,
        p {
            margin-left: 5px;
            font-size: 14px
        }
    </style>
    <script>
        //修改对应的生成目录和中心坐标，显示层级即可
        var center = new T.LngLat(120.45961, 29.38972);
        var imageURL = "./test/{z}/{x}_{y}.png";
        var zoom = 16;
        //下面的不用修改
        var map;
        var lay;
        var onlyMapLay;
        function onLoad() {
            //创建自定义图层对象
            lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
            var config = { layers: [lay] };
            //初始化地图对象
            map = new T.Map("mapDiv", config);
            //设置显示地图的中心点和级别
            map.centerAndZoom(center, zoom);
            //允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();
            //添加网格
            var glayer = new T.GridlineLayer({});
            map.addLayer(glayer);
        }

    </script>
</head>

<body onLoad="onLoad()">
    <div id="mapDiv"></div>
    <!-- <p>本示例演示如何让地图显示单图层</p>
<div style="position:absolute;left:520px;">
</div> -->
</body>

</html>